<script  setup>
import { ref, onMounted } from 'vue'
import { getChatInfoAPI } from '@/apis/chatAPI'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
// 导入ChatSend组件
import ChatSend from '@/views/Chat/components/ChatSend.vue'
// 导入websocket
// import { useWebsocket } from '@/composables/websocket'
// 获取聊天记录接口
import { getPrivateMessageAPI } from '@/apis/privateMessageAPI'

import ChatVideo from './ChatVideo.vue'


const route = useRoute()
const chatInfoList = ref([])
// privateMessage数据
const chatRecordList = ref([])
const getChatInfo = async (friendId = route.params.friendId) => {
  const res = await getChatInfoAPI(friendId)
  chatInfoList.value = res.data
  // 历史信息
  const recvId = chatInfoList.value[0]?.friendId
  const reses = await getPrivateMessageAPI(recvId)
  chatRecordList.value = reses.data
  // console.log(chatRecordList.value);
  console.log(chatInfoList.value[0]?.userId);

}
onMounted(() => getChatInfo())


// 合并实时消息

const plusrecodeList = ref([])

// 筛选后数组
const newArr = ref([])

// chatSend传过来的数据
const chatSend = ref([])
const ulHeight = ref(null)
const getMessage = (msg) => {
  // 固定滚动条到底部
  ulHeight.value.scrollTop = ulHeight.value.scrollHeight
  // console.log(msg);
  chatSend.value = msg
  // console.log(chatSend.value);
  plusrecodeList.value.push(chatSend.value)
  console.log(plusrecodeList.value);
  newArr.value = plusrecodeList.value
  console.log(newArr.value);
}


// 连接服务器
// 执行完本语句,客户端就会与服务器进行连接。
const localuser = JSON.parse(localStorage.getItem('user')) //从本地获取token
const userId = localuser.userInfo.data[0].userId
// console.log(JSON.parse(localStorage.getItem('user')).userInfo.dataOne);
var ws = new WebSocket('wss://5987g53p36.zicp.fun/websocket/username', [userId])
ws.onopen = function (evt) {
  console.log('websockt连接成功')
}
const friendMessage = ref([])
ws.onmessage = function (evt) {
  friendMessage.value = JSON.parse(evt.data)
  console.log(friendMessage.value);
  // localStorage.setItem('chatContentRecv', JSON.stringify(friendMessage.value))
  plusrecodeList.value.push(friendMessage.value)
  newArr.value = plusrecodeList.value
  console.log(plusrecodeList.value);
}

// 不用刷新直接更新路由
onBeforeRouteUpdate((to) => {
  getChatInfo(to.params.friendId)
  newArr.value = plusrecodeList.value = []

})
onMounted(() => {
  // 滚动条到底部
  ulHeight.value.scrollTop = ulHeight.value.scrollHeight
})


// 视频通话start
const centerDialogVisible = ref(false)
// 视频通话ending
</script>

    
<template>
  <div class="chat">
    <div class="head">
      <h1>{{ chatInfoList[0]?.friendNodes }}</h1>
      <div class="tool">
        <el-icon size="2vw">
          <Phone />
        </el-icon>
        <!-- 视频通话 -->
        <el-icon size="2vw" @click="centerDialogVisible = true">
          <VideoCamera />
        </el-icon>

        <el-dialog v-model="centerDialogVisible" title="视频通话" width="30%" align-center>
          <ChatVideo :message="chatInfoList[0]?.userId"></ChatVideo>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false">
                确认
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>

    <ul infinite-scroll-immediate="true" class="infinite-list" style="overflow: auto" ref="ulHeight">
      <!-- 历史聊天框 -->
      <li v-for="i in chatRecordList" :key="i.id" class="infinite-list-item">
        <div v-if="i.recvId === 32">
          <div class="left">
            <el-avatar shape="square" style="width: 100%;height: 100%;"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
          </div>
          <div class="content-left">
            <div class="triangle-left"></div>
            <p>{{ i.content }}</p>
          </div>
        </div>
        <div v-else>
          <div class="right">
            <el-avatar shape="square" style="width: 100%;height: 100%;"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
          </div>
          <div class="content">
            <div class="triangle"></div>
            <p>{{ i.content }}</p>
          </div>
        </div>
      </li>

      <!-- 实时聊天框 -->
      <li v-for="i in newArr" :key="i" class="infinite-list-item">
        <div v-if="i.sendId === 32">
          <div class="right">
            <el-avatar shape="square" style="width: 100%;height: 100%;"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
          </div>
          <div class="content">
            <div class="triangle"></div>
            <p>{{ i.content }}</p>
          </div>
        </div>
        <div v-else>
          <div class="left">
            <el-avatar shape="square" style="width: 100%;height: 100%;"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
          </div>
          <div class="content-left">
            <div class="triangle-left"></div>
            <p>{{ i.content }}</p>
          </div>
        </div>
      </li>
      <!-- 好友聊天框 -->
      <!-- <li v-for="j in chatRecv" :key="j" class="infinite-list-item">
        <div class="left">
          <el-avatar shape="square" style="width: 100%;height: 100%;"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
        <div class="content-left">
          <div class="triangle-left"></div>
          <p>{{ j }}</p>
        </div>
      </li> -->

    </ul>
    <ChatSend :message="chatInfoList[0]?.friendId" @selfmessage="getMessage"></ChatSend>

  </div>
</template>


<style lang="scss" scoped>
.chat {
  height: 100vh;

  // 头部
  .head {
    width: 100%;
    height: 10vh;
    background-color: #fff;
    border-bottom: .1vw solid #000;

    h1 {
      display: inline-block;
      margin-left: 2vw;
      line-height: 10vh;
      font-weight: normal;
      font-size: 2vw;
    }

    .tool {
      margin-right: 2vw;
      height: 10vh;
      line-height: 14vh;
      float: right;

      .el-icon {
        margin-right: 1vw;
      }
    }
  }




  // 聊天框
  .infinite-list {
    height: 65vh;
    padding: 0;
    margin: 0;
    list-style: none;
    padding-top: 1vw;
    background: #ffffff url('../../../assets/images/01-logo.png') no-repeat center;
    background-size: contain;

    .infinite-list-item {
      height: 4vw;
      margin: 0.1vw 0vw;
      color: var(--el-color-primary);

      // 自己的头像
      .right {
        margin-right: 1.5vw;
        float: right;
        width: 4vw;
        height: 4vw;
      }

      // 自己内容区域
      .content {
        position: relative;
        float: right;
        height: 4vw;
        line-height: 4vw;
        font-size: 1vw;
        margin-right: 1vw;
        background-color: #49d590;
        padding: 0 1vw;
        border-radius: .4vw;
        color: #000;

        // 自己三角形气泡
        .triangle {
          position: absolute;
          top: 1vw;
          right: -1.6vw;
          width: 0;
          height: 0;
          border: 1vw solid transparent;
          border-color: transparent transparent transparent #49d590;
        }
      }

      // 好友的头像
      .left {
        margin-left: 1.5vw;
        float: left;
        width: 4vw;
        height: 4vw;
      }

      // 好友内容区域
      .content-left {
        position: relative;
        float: left;
        height: 4vw;
        line-height: 4vw;
        font-size: 1vw;
        margin-left: 1vw;
        background-color: #49d590;
        padding: 0 1vw;
        border-radius: .4vw;
        color: #000;

        // 好友三角形气泡
        .triangle-left {
          position: absolute;
          top: 1vw;
          left: -1.6vw;
          width: 0;
          height: 0;
          border: 1vw solid transparent;
          border-color: transparent #49d590 transparent transparent;
        }
      }


    }
  }


}


// 隐藏滚动条
// ::-webkit-scrollbar {
//   display: none;
// }
</style>